<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import { signList } from '../../../services';
    import { ElMessage } from 'element-plus'

    type Emits = {
    showLogin: [show: boolean]
    }

    const emits = defineEmits<Emits>()


    // 获取 form 表单实例，调用表单的方法
    const ruleFormRef = ref<FormInstance>()
    // 密码一验证规则函数
    const validatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请输入密码!'))
        } else {
            if (ruleForm.checkPass !== '') {
                if (!ruleFormRef.value) return
                ruleFormRef.value.validateField('checkPass')
            }
                callback()
        }
    }
    // 密码二验证规则函数
    const validatePass2 = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请再次输入密码!'))
        } else if (value !== ruleForm.password) {
            callback(new Error("两次密码不一致！"))
        } else {
            callback()
        }
    }
    // 表单数据对象
    const ruleForm = reactive({
        password: '',
        checkPass: '',
        username: '',

    })

    const loading = ref(false)
    // 表单验证规则
    const rules = reactive<FormRules<typeof ruleForm>>({
        username: [{ required:true, message:'请输入用户名', trigger: 'change' }],
        password: [{ validator: validatePass, trigger: 'change' }],
        checkPass: [{ validator: validatePass2, trigger: 'change' }],
    })
    // 调取注册接口
    const getApi = async () =>{
        try {
            loading.value = true
            const res = await signList({
                username:ruleForm.username,
                password:ruleForm.password
            })
            console.log(res.data)
            if(res.data.code === 0) {
                ElMessage.success('注册成功！')
                emits('showLogin',true)
            }else {
                ElMessage.error(res.data.msg)
            }
        }catch(e) {
            console.log(e)
        }finally {
            loading.value = false
        }
    }


    // 注册按钮验证规则
    const submit = () => {
        // 调用组件方法  对表单所有数据校验
        ruleFormRef.value?.validate((valid) => {
            if (valid) {
                // console.log('校验成功')
                getApi()
            } else {
                console.log('校验失败')
            }
        })
    }

</script>

<template>
    <div class="signIn">
        <h3>注册页面</h3>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            status-icon
        >
            <el-form-item prop="username">
                <el-input placeholder="用户名" v-model.number="ruleForm.username" />
            </el-form-item>

            <el-form-item prop="password">
                <el-input placeholder="密码" v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>

            <el-form-item prop="checkPass">
                <el-input
                placeholder="确认密码"
                v-model="ruleForm.checkPass"
                type="password"
                autocomplete="off"
                />
            </el-form-item>

            <el-form-item>
                <el-button :loading="loading" type="primary"  @click="submit" style="width: 100%">注册</el-button>
            </el-form-item>
        </el-form>
        <el-button @click="emits('showLogin',true)" type="primary" text>有账号,去登录</el-button>
    </div>
   
</template>

<style lang="scss" scoped>
.signIn{
    width: 300px;
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    h3{
        text-align: center;
        margin-bottom: 15px;
    }
}
</style>